import { Card, InputNumber, Button } from 'antd'
import { useSelector, useDispatch } from 'react-redux'
import { setReduceFormFun, setReduceFormState, reduceTotal } from '../stores/counterSlice'

export function InputCard() {
  const reduceForm = useSelector((state) => state.counter)

  const dispatch = useDispatch()
  const onChange = (key, value) => {
    dispatch(setReduceFormFun({ key, value }))
  }

  return (
    <>
      <Card style={{ width: 300 }}>
        <div>
          <span>数字1:</span>
          <InputNumber
            style={{ width: '100%' }}
            min={1}
            controls={false}
            placeholder="请输入数字"
            value={reduceForm.num1}
            onChange={(value) => onChange('num1', value)}
          />
        </div>
        <div style={{ marginTop: 16 }}>
          <span>数字2:</span>
          <InputNumber
            controls={false}
            style={{ width: '100%' }}
            min={1}
            value={reduceForm.num2}
            placeholder="请输入数字"
            onChange={(value) => onChange('num2', value)}
          />
        </div>

        <Button type="primary" style={{ marginTop: 16 }} onClick={() => dispatch(setReduceFormState())}>
          重置
        </Button>
      </Card>
    </>
  )
}

export function TypeButtons() {
  const dispatch = useDispatch()
  const btns = ['+', '-', '*', '/']
  const btnsLits = btns.map((item, index) => (
    <Button type="primary" key={index} onClick={() => dispatch(reduceTotal({ type: item }))}>
      <span>运算符:</span>
      <span>{item}</span>
    </Button>
  ))

  return (
    <>
      <Card style={{ width: 300 }}>
        <div style={{ display: 'flex', flexFlow: 'column', gap: '10px' }}> {btnsLits}</div>
      </Card>
    </>
  )
}

export function TotalCard() {
  const reduceForm = useSelector((state) => state.counter)
  return (
    <>
      <Card style={{ width: 300 }}>
        <h2>得出的结果:{reduceForm.total}</h2>
      </Card>
    </>
  )
}
